<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const {reactive,effect,readonly,shallowReactive} = VueReactivity;
        //vue2中的响应式是不能控制的，vue3给了1个api可以自动转换响应式
        let state1 = reactive({name:'zf',age:12,a:[1,2,3]});//一般使用reactive
        let state2 = readonly({name:'zf',age:12});
        let state3 = shallowReactive({name:'zf',age:12,a:[1,2,3]});//只代理一层 性能高
        let state4 = shallowReadonly({name:'zf',age:12,a:[1,2,3]});
        console.log(state3.a);
        //vue2响应式原理 数据变化要重新执行watcher,更新试图，观察者模式，基于类
        //vue3响应式使用的是proxy -> 数据更新了，通知effect函数了
        //总结：我们在给对象添加响应式的最常用的还是reactive api
        console.log(state);
        effect(()=>{//副作用函数
            app.innerHTML = state.name + state.age
        })
        setInterval(()=>{
            state.name = 'jw'
        },1000)
        //effect api是/@vue/reactvity,vue3里面不能直接使用effect
        //render函数支持jsx
        //对象使用reactive最合适
    </script>
</body>
</html>